<template>
  <div src="" alt="" class="HospitalLogon_box">
    <img src="@/assets/images/HospitalLogonBg.png" alt="" class="HospitalLogon_bg">
    <div class="HospitalLogon_content">
      <div class="HospitalLogon_content_box">
        <div class="box_login_content">
          <img src="@/assets/images/hydeLogin.png" alt="">
          <a-form :form="form" class="box_login_content_input">
            <a-form-item>
              <a-input class="login_input" v-decorator="['email', { rules: [{ required: true, message: '邮箱地址不能为空!' }] }]" placeholder="请输入您的邮箱地址" />
            </a-form-item>
            <a-form-item>
              <a-input class="login_input" v-decorator="['password', { rules: [{ required: true, message: '密码不能为空!' }] }]" placeholder="请输入您的密码" />
            </a-form-item>
          </a-form>
          <div class="box_login_content_click">
            <div class="content_click_box">
              <a-checkbox @change="autoLogin" class="content_click_box_checkbox">自动登录</a-checkbox>
              <span class="content_click_box_text" @click="forgetPassword">忘记密码</span>
            </div>
            <button class="button_pct content_click_button" @click="loginSubmit" >登 录</button>
          </div>
        </div>
        <div class="box_login_fonter">
          <div class="content_fonter_text">
            <span>条款协议</span>
            <i>|</i>
            <span>隐私政策</span>
          </div>
          <p>copyright©2019 凡歌</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'HospitalLogon',
  data () {
    return {
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' })
    }
  },
  components: {},
  props: {},
  watch: {},
  methods: {

    ...mapActions(['Login', 'Logout']),

    autoLogin () {

    },

    forgetPassword () {
      this.$router.push('/user/forgetPassword')
    },
    loginSubmit () {
      this.form.validateFields({ force: true }, (err, values) => {
        if (!err) {
          console.log('login form', values)
          const loginParams = {}
          loginParams.email = values.email
          loginParams.password = values.password
          console.log(loginParams, '你是账号密码？')
          this.Login(loginParams)
            .then((res) => this.loginSuccess(res))
            .catch(err => this.requestFailed(err))
            .finally(() => {
              // state.loginBtn = false
            })
        } else {
          setTimeout(() => {
            // state.loginBtn = false
          }, 600)
        }
      })

      // this.form.validateFields((err, values) => {
      //   console.log(err,"你是啥了")
      //   if (!err) {
      //     console.log('ggggggggg: ', values.email,values.password);

      //   this.$axios({
      //     method: "post",
      //     url: "/api/sys/sysAccount/login",
      //     // url: "/api/laocai/user/info",

      //     headers: {
      //       // 'x-peacock-auth': localStorage.getItem('x-peacock-auth'),
      //       'Content-Type': 'application/json;charset=UTF-8'
      //     },
      //     params: {},
      //     data: {
      //       email: values.email,
      //       password: values.password,
      //     }
      //   })
      //     .then(res => {
      //       if (res.data.code == 0) {
      //         this.chuShenQuery(1)
      //         this.adminAllotSelectData = ''
      //       } else {
      //         this.$Message.success(this.$t('m.errorCode' + res.body.code));
      //       }
      //     })
      //     .catch(error => {
      //       this.$Message.warning(this.$t('m.qǐngqiúcuòwù'));
      //       console.log(error);
      //     });

      //   }
      // });
    },

    loginSuccess (res) {
      console.log(res)
      console.log(res, '登录')
      // check res.homePage define, set $router.push name res.homePage
      // Why not enter onComplete
      /*
      this.$router.push({ name: 'analysis' }, () => {
        console.log('onComplete')
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`
        })
      })
      */
      this.$router.push({ path: '/UserList' })
      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        // this.$notification.success({
        //   message: '欢迎',
        //   description: `${timeFix()}，欢迎回来`
        // })
      }, 1000)
    },

    requestFailed (err) {
      this.isLoginError = true
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
        duration: 4
      })
    },
    handleSelectChange (value) {
      console.log(value)
      this.form.setFieldsValue({
        note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`
      })
    }
  },
  filters: {},
  computed: {},
  created () { },
  mounted () { },
  destroyed () { }
}
</script>

<style lang="less">
.HospitalLogon_box {
  width: 100%;
  height: 100%;
  background: #4ebabd;
  overflow: hidden;
  .HospitalLogon_content {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    .HospitalLogon_content_box {
      float: right;
      width: 25%;
      height: 73.7%;
      min-width: 338px;
      min-height: 440px;
      position: relative;
      top: 13%;
      margin-right: 14%;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
      border-radius: 10px;
      .box_login_content {
        width: 73%;
        margin: 0 auto;
        margin-top: 20%;
        img {
          margin-bottom: 12%;
          width: 80%;
          object-fit: cover;
        }
        .box_login_content_input {
          .login_input {
            input {
              height: 40px;
              background: rgba(249, 249, 249, 1);
              border-radius: 5px;
              border: 1px solid rgba(239, 239, 239, 1);
            }
          }
        }
        .box_login_content_click {
          padding-top: 10%;
          .content_click_box {
            height: 45px;
            .content_click_box_checkbox {
              font-size: 14px;
              font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              .ant-checkbox-inner {
                border-color: rgba(86, 206, 209, 1);
                border-radius: 2px;
              }
            }
            .ant-checkbox-checked {
              .ant-checkbox-inner {
                background: rgba(86, 206, 209, 1);
              }
            }
            .content_click_box_text {
              float: right;
              font-size: 14px;
              font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
              font-weight: 400;
              color: rgba(86, 206, 209, 1);
              cursor: pointer;
            }
          }
          .content_click_button {
            width: 100%;
            height: 40px;
            background: #56ced1;
            font-size: 16px;
            font-family: PingFang-SC-Bold, Microsoft Yahei, sans-serif;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            margin: 0 0px!important;
          }
        }
      }
      .box_login_fonter {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 11.1%;
        background: rgba(246, 246, 246, 1);
        border-radius: 0px 0px 16px 16px;
        text-align: center;
        min-height: 65px;
        i {
          margin: 0 6%;
        }
        .content_fonter_text {
          height: 55%;
          line-height: 55%;
          margin-top: 4.38%;
          margin-bottom: -4.38%;
          span {
            font-size: 14px;
            font-family: PingFang-SC-Bold, Microsoft Yahei, sans-serif;
            font-weight: bold;
            color: rgba(74, 74, 74, 1);
            cursor: pointer;
          }
          i {
            font-weight: 600;
            color: #bfbfbf;
          }
        }
        p {
          font-size: 14px;
          font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
      }
    }
  }
  .HospitalLogon_bg {
    height: 100%;
    object-fit: cover;
  }
}
</style>
